<template>
  <div class="container m-w-screen m-h-screen">
    <div class="top m-w-full">
      <div class="m-relative">
        <img class="m-w-full" src="./assets/images/bg_000.jpg" />
        <div class="btn-wrapper m-absolute">
          <div class="m-w-full m-h-full m-relative">
            <img class="m-w-full m-absolute m-z-10"
              src="./assets/images/btn__003.png"
              v-if="num>=20&&prizeLevel!=3" 
              @click="composeBlindbox" />
            <img class="m-w-full m-absolute m-z-10"
              src="./assets/images/btn__008.png"
              v-else-if="num>=20&&prizeLevel==3" />
            <div class="m-w-full" v-else @click="gotoBlindBox">
              <img class="m-w-full m-absolute" src="./assets/images/btn__002.png"/>
              <div class="text m-w-full m-absolute m-h-full m-z-10 m-flex m-justify-center m-items-center">
                当前 {{num}}/20 现在去抽盒吧！
              </div>
            </div>
          </div>
        </div>

        <div class="m-absolute m-w-full m-h-full m-top-0 m-right-0">
          <div class="wrap m-relative m-w-full" v-for="(item,idx) in [1,2,3,4]" :key="idx">
            <div class="wrap1 m-absolute" v-for="(item1,idx1) in [1,2,3,4,5]" :key="idx1">
              <div class="m-w-full m-h-full m-relative">
                <img class="pic_a m-absolute" 
                  :class="{
                    'animation-hide':num>=5*item&&lastNum<=5*item,
                    'm-opacity-0':lastNum>=5*item,
                    'm-opacity-100':lastNum<5*item,
                  }"
                  :style="{'animation-delay':5*item-lastNum+'s'}"
                  :src="require(`./assets/images/pic_00${item}_a.png`)" 
                  v-if="item1==5" 
                />
                <img class="light_b m-absolute" 
                  src="./assets/images/light_a.png"
                />
                <img class="lg_a m-absolute"
                  src="./assets/images/lg_a.png"
                  v-if="item1==5"
                />
                <img class="light_b m-absolute" 
                  :class="{
                    'animation-show':num>=(item1+5*idx)&&lastNum<=(item1+5*idx),
                    'm-opacity-100':lastNum>(item1+5*idx),
                    'm-opacity-0':lastNum<=(item1+5*idx)
                  }" 
                  :style="{'animation-delay':item1+5*idx-lastNum+'s'}" 
                  src="./assets/images/light_b.png" 
                  v-if="num>=(item1+5*idx)"
                />
                <img class="lg_b m-absolute"
                :class="{
                    'animation-show':num>=5*item&&lastNum<=5*item,
                    'm-opacity-100':lastNum>5*item,
                    'm-opacity-0':lastNum<=5*item
                  }" 
                  :style="{'animation-delay':5*item-lastNum+'s'}"
                  src="./assets/images/lg_b.png"
                  v-if="item1==5&&num>=5*item"
                />
                <img class="pic_b m-absolute"
                  :class="{
                    'animation-show':num>=5*item&&lastNum<=5*item,
                    'm-opacity-100':lastNum>5*item,
                    'm-opacity-0':lastNum<=5*item
                  }" 
                  :style="{'animation-delay':5*item-lastNum+'s'}" 
                  :src="require(`./assets/images/pic_00${item}_b.png`)" 
                  v-if="item1==5&&num>=5*item" 
                />
                <img  class="light_b m-absolute m-opacity-0" 
                  :class="{
                    'animation-show':num>=(item1+5*idx)&&lastNum<=(item1+5*idx)
                  }" 
                  :style="{'animation-delay':item1+5*idx-lastNum+'s','animation-fill-mode': num==(item1+5*idx)?'forwards':'backwards'}"
                  src="./assets/images/light_c.png" 
                  v-if="num>=(item1+5*idx)"
                />
                <div  class="steps m-absolute m-opacity-0" 
                  :class="{
                    'animation-step':num>=(item1+5*idx)&&lastNum<=(item1+5*idx),
                    'm-opacity-100':num>=(item1+5*idx)&&lastNum<=(item1+5*idx)
                  }" 
                  :style="{'animation-delay':item1+5*idx-lastNum+'s','animation-fill-mode': num==(item1+5*idx)?'forwards':'backwards'}"
                  v-if="num>=(item1+5*idx)"
                />
                <Particle class="particle-wrapper"
                  :class="{
                    'animation-show':num>=(item1+5*idx),
                    'm-opacity-100':lastNum>(item1+5*idx),
                    'm-opacity-0':lastNum<=(item1+5*idx)
                  }" 
                  :style="{'animation-delay':(item1+5*idx)-lastNum+'s'}" 
                  v-if="num>=(item1+5*idx)"
                />
                <div class="text m-absolute" v-if="item1==5">
                  {{num>5*item?5*item:num}}/{{5*item}}
                </div>
              </div>
            </div>
          </div>
          
        </div>

      </div>
      <img class="m-w-full" src="./assets/images/bg_002.jpg" />
    </div>
    <!-- Tab切换 -->
    <div class="tabs m-w-full m-flex m-justify-center">
      <div class="tab m-w-1_2 m-flex m-items-center" @click="changeTab('detail')">
        <img class="m-w-full" src="./assets/images/btn__004.png" v-show="currTab!='detail'" />
        <img class="m-w-full" src="./assets/images/btn__005.png" v-show="currTab=='detail'" />
      </div>
      <div class="tab m-w-1_2 m-flex m-items-center" @click="changeTab('rule')">
        <img class="m-w-full" src="./assets/images/btn__006.png" v-show="currTab!='rule'" />
        <img class="m-w-full" src="./assets/images/btn__007.png" v-show="currTab=='rule'" />
      </div>
    </div>
    <!-- 详情 -->
    <div class="tab-pannel m-w-full" v-show="currTab=='detail'">
      <img class="m-w-full" src="./assets/images/img_1.jpg" />
      <img class="m-w-full" src="./assets/images/img_2.jpg" />
      <img class="m-w-full" src="./assets/images/img_3.jpg" />
      <img class="m-w-full" src="./assets/images/img_4.jpg" />
      <img class="m-w-full" src="./assets/images/img_5.jpg" />
      <img class="m-w-full" src="./assets/images/img_6.jpg" />
      <img class="m-w-full" src="./assets/images/img_7.jpg" />
      <img class="m-w-full" src="./assets/images/img_8.jpg" />
      <img class="m-w-full" src="./assets/images/img_9.jpg" />
    </div>
    <!-- 规则 -->
    <div class="tab-pannel m-w-full" v-show="currTab=='rule'">
      <img class="m-w-full" src="./assets/images/pic_text.jpg" />
    </div>
    <div class="m-w-full">
      <img class="m-w-full" src="./assets/images/bg_003.png" />
    </div>
    <!-- 奖品 -->
    <div class="mask m-z-40 m-overflow-scroll m-w-screen m-h-screen m-absolute m-top-0 m-right-0 m-flex m-flex-col m-justify-center m-items-center" v-if="prizes.filter(item => item.visible).length>0">
      <img class="m1" :src="item.imgUrl" v-for="(item,idx) in prizes" :key="idx" v-show="item.visible" />
      <div class="m-w-full m-flex m-justify-center">
        <img class="m3" src="./assets/images/3.png" @click="clickPrize" />
      </div>
    </div>
    <!-- 合成图片 -->
    <div class="mask m-z-40 m-overflow-scroll m-w-screen m-h-screen m-absolute m-top-0 m-right-0 m-flex m-flex-col m-justify-center m-items-center" v-if="showCompose">
      <img class="m1" src="./assets/images/m1.png" />
      <div class="m-w-full m-flex m-justify-center">
        <img class="m2" src="./assets/images/m4.png" @click="colseCompose" />
        <img class="m2" src="./assets/images/m2.png" @click="gotoAdmireBag" />
      </div>
    </div>
    <!-- 信息提示 -->
    <div class="tips m-overflow-scroll m-w-screen m-h-screen m-absolute m-top-0 m-right-0 m-flex m-flex-col m-justify-center m-items-center" v-if="msg">
      <div class="text m-z-50">{{msg}}</div>
    </div>
    <!-- 刷新按钮 -->
    <div class="refresh-fixed m-fixed" @click="getBlindboxActivity"></div>
  </div>
</template>

<script>
import {ref,watch,reactive} from "vue";
import {getBlindboxNum,getBlindboxPrize} from './api/index'
import {getQueryObj} from './utils/url'
import Particle from './components/Particle.vue'

const queryObj=getQueryObj();
export default {
  name: 'App',
  components: {
    Particle
  },
  setup(){
    const currTab=ref("detail");
    const changeTab=(tab) =>{
      currTab.value=tab;
    }
    const num=ref(0);
    const lastNum=ref(0);
    const showCompose=ref(false);
    const msg=ref('');
    const isUniEnv=ref(false);
    const prizes=reactive([]);
    const prizeLevel=ref(-1);
    const goodsId=ref(-1);
    watch([num,lastNum],(newVal,oldVal) =>{

    });
    const clickPrize=() =>{
      let idx=prizes.findIndex(item => item.visible);
      getBlindboxPrize(idx+1).then(res =>{
        if(res.code==200){
          showMsg(res.data);
          if(idx==prizes.length-1){
            prizes[idx].visible=false;
            return;
          }
          if(idx!=-1){
            prizes[idx].visible=false;
            idx++;
            prizes[idx].visible=true;
          }
        }else{
          showMsg(res.message);
        }
        
      });
    }
    const composeBlindbox=() =>{
      getBlindboxPrize(3).then(res =>{
        if(res.code==200){
          showCompose.value=true;
        }else{
          showMsg(res.message);
        }
      })
    }
    const gotoAdmireBag=() =>{
      if(!isUniEnv.value){
        showMsg("请前往一番赏");
      }
      uni.switchTab({
        url:"/pages/admirebag",
      });
    }
    const gotoBlindBox=() =>{
      if(goodsId.value!=-1){
        uni.navigateTo({
          url: '/pagesIndex/blindDetails'+`?id=${goodsId.value}`
        });
      }
    }
    const showMsg=(title,duration=2000) =>{
      msg.value=title;
      setTimeout(() =>{
        msg.value="";
      },duration)
    }
    const getBlindboxActivity=() =>{
      getBlindboxNum().then(res =>{
        //console.log(res);
        prizes.splice(0,prizes.length);
        // prizes.push({
        //   imgUrl:require('./assets/images/1.png'),
        //   visible:false,
        // });
        // prizes.push({
        //   imgUrl:require('./assets/images/2.png'),
        //   visible:false,
        // });
        if(res.code==200){
          lastNum.value=parseInt(res.data.last_blind_box_count);
          num.value=parseInt(res.data.now_blind_box_count);
          goodsId.value=parseInt(res.data.blind_box_goods_id.id);
          if(res.data.blind_box_act_lists[6]){
            prizeLevel.value=1;
          }
          if(res.data.blind_box_act_lists[12]){
            prizeLevel.value=2;
          }
          if(res.data.blind_box_act_lists[20]){
            prizeLevel.value=3;
          }
          if(num.value>=6&&num.value<12){
            prizes.push({
              imgUrl:require('./assets/images/1.png'),
              visible:false,
            });
            if(res.data.blind_box_act_count[6]>0&&!res.data.blind_box_act_lists[6]){
              prizes[0].visible=true;
            }
          }
          if(num.value>=12){
            prizes.push({
              imgUrl:require('./assets/images/1.png'),
              visible:false,
            });
            prizes.push({
              imgUrl:require('./assets/images/2.png'),
              visible:false,
            });
            if(res.data.blind_box_act_count[6]>0&&!res.data.blind_box_act_lists[6]){
              prizes[0].visible=true;
            }else if(res.data.blind_box_act_count[12]>0&&!res.data.blind_box_act_lists[12]){
              prizes[1].visible=true;
            }
          }
          if(prizeLevel.value==3){
            showMsg('该活动每个用户只能参与一次，下次再来吧');
          }
        }else{
          showMsg(res.message);
        }
      });
    }
    const colseCompose=() =>{
      getBlindboxActivity();
      showCompose.value=false;
    }
    window.addEventListener('load', (e) => {
      if(queryObj.num){
        num.value=queryObj.num;
      }
      if(queryObj.lastNum){
        lastNum.value=queryObj.lastNum;
      }
      getBlindboxActivity();
    });
    document.addEventListener('UniAppJSBridgeReady',() =>{
      uni.getEnv((res) =>{
        isUniEnv.value=res.h5==false;
      });
    });
    
    return {
      currTab,num,lastNum,showCompose,msg,isUniEnv,prizes,prizeLevel,goodsId,
      changeTab,composeBlindbox,gotoAdmireBag,clickPrize,gotoBlindBox,colseCompose,getBlindboxActivity
    }
  }
}
</script>

<style>
body{
  margin: 0px;
  padding: 0px;
}
</style>
<style lang="scss" scoped>
@import './assets/css/base.css';
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.animation-show{
	animation: show 1s ease-in 1;
  animation-fill-mode: forwards;
}
.animation-hide{
	animation: hide 1s ease-in 1;
  animation-fill-mode: forwards;
}
.animation-step{
	animation: step 1s steps(1, start) 1;
}
@keyframes step {
  @for $i from 8 through 32 {
      #{ 4 * ($i - 8) }#{"%"} { 
      background-image:url('./assets/images/sprites/2021831-135539_000#{if( $i < 10 ,"0"+$i,$i)}.png');
    }
  }
}
@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes hide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.container{
  font-size: 0px;
  overflow-x: hidden;
  background: #0362a5;
}
.tabs .tab{
  height: 210px;
  width: 360px;
}
.btn-wrapper{
  left: 187px;
  bottom: -60px;
  width: 375px;
  height: 130px;
  .text{
    font-size: 22px;
    color: white;
    font-weight: 800;
    text-shadow: 0px 8px 3px #005692;
  }
}
.tab-pannel{
  padding: 0 40px;
  box-sizing: border-box;
  margin-top: -13px;
}
.wrap1{
  width: 30px;
  height: 68px;
  .light_b{
    width: 40px;
    bottom: -2px;
    left: -6px;
  }
  .lg_b{
    width: 113px;
    bottom: -8px;
    left: -48px;
  }
  .lg_a{
    width: 95px;
    bottom: -10px;
    left: -31px;
  }
  .text{
    width: 60px;
    bottom: -31px;
    left: -10px;
    color: white;
    font-weight: 800;
  }
}
.wrap{
  height: 168px;
  width: 562px;
  margin-left: 100px;
  margin-right: 100px;
  box-sizing: border-box;
  font-size: 16px;
  .steps{
    width: 90px;
    height: 90px;
    background-size: 90px 90px;
    left: -28px;
    bottom: -19px;
  }
}
.wrap:nth-child(1){
  margin-top: 500px;
}
.wrap:nth-child(1) {
  .wrap1:nth-child(1){
    top: 10px;
    right: 189px;
  }
  .wrap1:nth-child(2){
    top: 24px;
    right: 266px;
  }
  .wrap1:nth-child(3){
    top: 48px;
    right: 339px;
  }
  .wrap1:nth-child(4){
    right: 402px;
    top: 81px;
  }
  .wrap1:nth-child(5){
    right: 480px;
    top: 119px;
  }
  .pic_b{
    width: 160px;
    left: -63px;
    bottom: 12px;
  }
  .pic_a{
    width: 138px;
    left: -53px;
    bottom: 27px;
  }
}
.wrap:nth-child(2){
  .wrap1:nth-child(1){
    top: 2px;
    left: 113px;
  }
  .wrap1:nth-child(2){
    top: 27px;
    left: 190px;
  }
  .wrap1:nth-child(3){
    top: 49px;
    left: 275px;
  }
  .wrap1:nth-child(4){
    top: 64px;
    left: 366px;
  }
  .wrap1:nth-child(5){
    top: 64px;
    left: 466px;
  }
  .pic_b{
    width: 178px;
    left: -79px;
    bottom: 24px;
  }
  .pic_a{
    width: 159px;
    left: -69px;
    bottom: 38px;
  }
}
.wrap:nth-child(3){
  .wrap1:nth-child(1){
    top: -46px;
    right: 113px;
  }
  .wrap1:nth-child(2){
    top: -10px;
    right: 177px;
  }
  .wrap1:nth-child(3){
    top: 19px;
    right: 251px;
  }
  .wrap1:nth-child(4){
    top: 46px;
    right: 334px;
  }
  .wrap1:nth-child(5){
    top: 57px;
    right: 428px;
  }
  .pic_b{
    width: 178px;
    left: -67px;
    bottom: 22px;
  }
  .pic_a{
    width: 158px;
    left: -57px;
    bottom: 35px;
  }
}
.wrap:nth-child(4){
  .wrap1:nth-child(1){
    top: -58px;
    left: 44px;
  }
  .wrap1:nth-child(2){
    top: -28px;
    left: 131px;
  }
  .wrap1:nth-child(3){
    top: -7px;
    left: 228px;
  }
  .wrap1:nth-child(4){
    top: 6px;
    left: 325px;
  }
  .wrap1:nth-child(5){
    top: 10px;
    left: 429px;
  }
  .pic_b{
    width: 178px;
    left: -76px;
    bottom: 15px;
  }
  .pic_a{
    width: 155px;
    left: -63px;
    bottom: 30px;
  }
}
.mask{
  background: black;
  //opacity: 0.6;
  //background-image: url('./assets/images/m0.png');
  //background-size: 100% 100%;
  .m1{
    width: 750px;
  }
  .m2{
    width: 335px;
    height: 150px;
    margin-top: 57px;
  }
  .m3{
    width: 335px;
    height: 133px;
    margin-top: 57px;
  }
}
.tips{
  font-size: 30px;
  .text{
    padding: 10px 20px;
    background: black;
    color: white;
    border-radius: 999px;
  }
}
.refresh-fixed{
  background: url("./assets/images/Btn_023.png");
  width: 100px;
  height: 100px;
  background-size: 100% 100%;
  right: 45px;
  bottom: 45px;
}
</style>
